<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js" ></script>
</head>
<body>
    <!-- 首先准备一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1>
        <h1>hello,{{age}}</h1>
    </div>
    <!--
        容器和Vue对象之间的关系，只能够一对一
        如果容器：Vue对象     只有第一个Vue对象会有效，后面对应的Vue对象无效
    
        {{js表达式}}    --  容器中的{{}}里面只能存放js表达式
        js表达式：
            一个表达式会生成一个值，可以放在任何一个需要值的地方
            //  const x = js表达式会成功
        js代码(语句)：
            if()
            for()     语句，控制程序
    -->
    <script type="text/javascript">
        Vue.config.productionTip = false;   //关闭Vue启动的提示
        //创建Vue实例,参数只有一个，为对象
        new Vue({
            el:'#root',        //el用于制定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{            //data用于存储数据，数据提供el所指定的容器去使用，值我们暂时为一个对象
                name:'尚硅谷',
                age:20
            }
        });
    </script>
    
</body>
</html>